<!--  使命宗旨-->
<template>
  <div class="addTenant">
    <a-card class="cardBox br-10" title="使命宗旨" :bordered="false">
      <a slot="extra" @click="handleVisionAdd">添加</a>
      <div class="ant-advanced-search-form">
        <a-table :columns="columns" :data-source="visionData" :pagination="false">
          <span slot="serial" slot-scope="text, record, index">
            {{ index + 1 }}
          </span>
          <span slot="action" slot-scope="text, record">
            <a-button type="primary" ghost size="small" class="_mr-5" @click="handleVisionEdit(record)">
              编辑
            </a-button>
            <a-button type="primary" ghost size="small" class="_mr-5" @click="handleVisionDel(record)">
              删除
            </a-button>
          </span>
        </a-table>
      </div>
    </a-card>
    <a-card class="cardBox br-10" title="视频设置" :bordered="false">
      <a slot="extra" @click="handleVideoSave">保存</a>
      <a-form-model ref="ruleForm" :model="form1" class="width-50" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
        <a-form-model-item
          label="视频标题"
          prop="url"
          :rules="[{ required: true, message: '请输入标题', trigger: 'blur' }]"
        >
          <a-input v-model="form1.title" placeholder="请输入标题" />
        </a-form-model-item>

        <a-form-model-item
          label="视频内容"
          prop="url"
          :rules="[{ required: true, message: '请上传视频,限制大小50M以内', trigger: 'change' }]"
        >
          <UploadVideo v-model="form1.url" :fileSize="50" />
        </a-form-model-item>
      </a-form-model>
    </a-card>
    <a-card class="cardBox br-10" title="架构图设置" :bordered="false">
      <a slot="extra" @click="handleStructureImgSave">保存</a>
      <a-form-model ref="ruleForm" :model="form2" class="width-50" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
        <a-form-model-item
          label="架构图"
          prop="url"
          :rules="[{ required: true, message: '请上传架构图,建议尺寸比例9:16', trigger: 'change' }]"
        >
          <UploadImg
            v-model="form2.url"
            :fileSize="20"
            warehouse
            cropper
            :width="225"
            :height="400"
            :cropperEnlarge="2"
          >
            <template slot="tips">
              建议尺寸比例9:16
            </template>
          </UploadImg>
        </a-form-model-item>
      </a-form-model>
    </a-card>
    <vision ref="vision" @ok="handleVision" />
  </div>
</template>
<script>
import {
  extVisionList,
  extVisionRemove,
  extVideoCreateOrEdit,
  extVideoGet,
  structureImgGet,
  structureImgCreateOrEdit
} from '@/api/system/system'
import vision from './vision'
import UploadVideo from '@/components/UpFile/uploadVideo'
import UploadImg from '@/components/UpFile/uploadImg'

export default {
  data() {
    return {
      loading: false,

      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' },
          width: '80px'
        },
        {
          title: '标题',
          dataIndex: 'title',
          ellipsis: true,
          width: '150px'
        },
        {
          title: '简介',
          dataIndex: 'intro',
          ellipsis: true
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '150px',
          scopedSlots: { customRender: 'action' }
        }
      ],
      visionData: [],
      form1: {},
      form2: {}
    }
  },
  components: {
    vision,
    UploadImg,
    UploadVideo
  },
  created() {
    this.handleVision()
    this.handleExtVideoGet()
    this.handleStructureImgGet()
  },
  methods: {
    // 查询使命愿景列表
    handleVision() {
      return extVisionList().then(res => {
        this.visionData = res.data
      })
    },

    // 添加使命愿景
    handleVisionAdd() {
      var params = {
        title: '添加使命宗旨',
        type: 'add'
      }
      this.$refs.vision.add(params)
    },

    // 编辑使命愿景
    handleVisionEdit(record) {
      var params = {
        title: '添加使命宗旨',
        type: 'edit',
        data: record
      }
      this.$refs.vision.edit(params)
    },

    // 删除使命愿景
    handleVisionDel(info) {
      this.$confirm({
        title: `确定删除'${info.title}'？`,
        onOk: () => {
          var params = {
            id: info.id
          }
          return extVisionRemove(params).then(res => {
            this.$message.success('删除成功!')
            this.handleVision()
          })
        },
        onCancel() {}
      })
    },

    // 视频信息
    handleExtVideoGet() {
      return extVideoGet().then(res => {
        this.form1 = {
          id: res.data.id || undefined,
          title: res.data.title || 'a',
          url: res.data.url || ''
        }
      })
    },
    // 保存视频
    handleVideoSave(e) {
      const that = this
      that.$refs.ruleForm.validate(valid => {
        if (valid) {
          that.loading = true
          extVideoCreateOrEdit(that.form1)
            .then(res => {
              that.loading = false
              that.$message.success('保存成功!')
              that.handleExtVideoGet()
            })
            .catch(() => {
              that.loading = false
            })
        }
      })
    },

    //组织架构图信息
    handleStructureImgGet() {
      return structureImgGet().then(res => {
        this.form2 = {
          id: res.data.id || undefined,
          title: res.data.title || 'a',
          url: res.data.url || ''
        }
      })
    },
    //保存组织架构图
    handleStructureImgSave(e) {
      const that = this
      that.$refs.ruleForm.validate(valid => {
        if (valid) {
          that.loading = true
          structureImgCreateOrEdit(that.form2)
            .then(res => {
              that.loading = false
              that.$message.success('保存成功!')
              that.handleStructureImgGet()
            })
            .catch(() => {
              that.loading = false
            })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped></style>
